<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body {
            margin: 0;
        }

        .parent {
            margin-left: 90px;
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: #ccc;
            /* position: relative; */
            overflow: hidden;
        }

        .parent .child {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000; 
            padding: 5px;
            margin-top: 20px;
            margin-left: 30px;
        }

        .container {
            margin-left: 90px;
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: #ccc;
            position: relative;
            overflow: hidden;
        }

        .container .haizi {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000; 
            padding: 5px;
            margin-top: 20px;
            margin-left: 30px;
        }
    </style>
</head>
<body>

    <div class="parent">
        <div class="child"></div>
    </div>

    <div class="container">
        <div class="haizi"></div>
    </div>



    <script>
        // 获取.child标签
        var child = document.querySelector(".child");
        var haizi = document.querySelector(".haizi");
        // 尺寸
        console.log("实际宽度：",child.offsetWidth); //边框+内边距+内容宽度
        console.log("实际高度：",child.offsetHeight); //同上

        console.log(haizi.offsetWidth);
        console.log(haizi.offsetHeight);

        // 位置(父元素没有定位的情况)
        console.log(haizi.offsetLeft);
        console.log(haizi.offsetTop);
        console.log("距离浏览器左边间距：",child.offsetLeft);// 120
        console.log("距离浏览器顶部间距：",child.offsetTop);// 70
        // 偏移父元素
        console.log(child.offsetParent);// body标签
        
        // 位置(父元素有定位的情况)
        console.log("距离浏览器左边间距：",haizi.offsetLeft);// 30
        console.log("距离浏览器顶部间距：",haizi.offsetTop); // 20
        console.log(haizi.offsetParent);//  div.parent标签


     



    </script>
</body>
</html>